<template>
  <view class="home">
    <view
      style="padding: 12rpx 30rpx; margin-bottom: 15rpx"
      @click="handSearch"
    >
      <SearchVue @confirm="onConfirm"></SearchVue>
    </view>
    <view class="swiper_view">
      <image
        style="height: 100%; width: 100%"
        src="@/assets/test/1.png"
        mode="scaleToFill"
      />
    </view>
    <GoodsBlock style="margin-bottom: 60rpx">
      <view class="goods_show">
        <image
          class="good_img"
          v-for="item in goodsShow"
          :key="item.id"
          :src="item.img"
          mode="aspectFill"
        />
      </view>
    </GoodsBlock>
    <GoodsBlock style="margin-bottom: 60rpx" :goods="goodsClassify">
    </GoodsBlock>
    <GoodsBlock style="margin-bottom: 60rpx" :goods="goodsClassify">
    </GoodsBlock>
    <GoodsBlock style="margin-bottom: 60rpx" :goods="goodsClassify">
    </GoodsBlock>
  </view>
</template>

<script setup>
import SearchVue from "@/component/Search/index.vue";
import GoodsBlock from "./component/GoodsBlock.vue";
import { getGoodsCategories } from "./modules/api";
import { ref, reactive } from "vue";
import a1 from "@/assets/test/a1.png";
import a2 from "@/assets/test/a2.png";
import a3 from "@/assets/test/a3.png";

import b1 from "@/assets/test/b1.png";
import b2 from "@/assets/test/b2.png";
import b3 from "@/assets/test/b3.png";
import b4 from "@/assets/test/b4.png";

const goodsShow = ref([
  {
    id: 1,
    img: b1,
  },
  {
    id: 2,
    img: b2,
  },
  {
    id: 3,
    img: b3,
  },
  {
    id: 4,
    img: b4,
  },
]);

const goodsClassify = ref([
  {
    id: 1,
    name: "商品名称",
    img: a1,
    price: "39.9",
  },
  {
    id: 2,
    name: "商品名称",
    img: a2,
    price: "39.9",
  },
  {
    id: 3,
    name: "商品名称",
    img: a3,
    price: "39.9",
  },
  {
    id: 4,
    name: "商品名称",
    img: a1,
    price: "39.9",
  },
  {
    id: 5,
    name: "商品名称",
    img: a2,
    price: "39.9",
  },
  {
    id: 6,
    name: "商品名称",
    img: a3,
    price: "39.9",
  },
]);

function onConfirm({ value }) {
  console.log(value);
}
function handSearch() {
  uni.navigateTo({ url: "/pages/home/search/index" });
}
</script>

<style lang="scss" scoped>
.home {
  padding-bottom: 100px;
  .swiper_view {
    width: 100%;
    height: 878rpx;
    margin: 0 0 60rpx;
    padding: 0 30rpx;
  }
  .goods_show {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 18rpx;
    .good_img {
      width: 100%;
      height: 213rpx;
    }
  }
}
</style>
